<template>
  <div v-if="document">
    <el-dialog :visible.sync="imgIShow">
      <img :src="imgUrl" alt="pic" style="width: 100%" />
    </el-dialog>
    <el-row :gutter="20" style="margin: 0 5px 0 5px">
      <el-col :span="12" style="margin-bottom: 20px">
        <el-card>
          <div class="height-300">
            <div class="content-title"><span>题目:</span></div>
            <div class="item-title">
              <span>{{ document.itemTitle }}</span>
            </div>
            <div class="content-title"><span>内容:</span></div>
            <div class="item-content">
              <pre>{{ document.itemContent }}</pre>
            </div>
            <DownloadFile
              v-for="(item, index) in document.file"
              :key="item.name"
              :file="item"
            >
            </DownloadFile>
            <img
              v-for="(item, index) in document.contentPic"
              :key="item.url"
              style="width: 100%; max-width: 400px; max-height: 500px"
              :src="item.url"
              alt="图片"
              @click="showImg(item.url)"
            />
            <div v-show="document.resultExample">
              <div class="result-example-title"><span>结果演示:</span></div>
              <div class="result-example-content">
                <pre>{{ document.resultExample }}</pre>
              </div>
            </div>
            <img
              v-for="(item, index) in document.resultExamplePic"
              :key="item.url"
              style="width: 100%; max-width: 400px; max-height: 500px"
              :src="item.url"
              alt="图片"
              @click="showImg(item.url)"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" style="margin-bottom: 20px">
        <el-card>
          <div class="item-title">
            <span>答案:</span>
          </div>
          <Codemirror v-model="document.answer">
          </Codemirror>
          <el-upload
            v-if="uploadIsShow"
            action="papi/file/upload"
            style="margin: 10px 0 10px 0"
            :on-remove="handleRemoveFile"
            :before-upload="textBeforeUpload"
            name="myfile"
            :limit="1"
            :headers="headers"
            :on-exceed="handleExceed"
            :file-list="document.answerFile"
            :on-success="uploadSuccessFile"
          >
            <el-button size="small" type="primary" icon="el-icon-plus"
              >附件</el-button
            >
            <div slot="tip" class="el-upload__tip">文件大小不超过10M</div>
          </el-upload>
          <div v-if="fileListIsShow">
            <DownloadFile
              v-for="(item, index) in document.answerFile"
              :key="item.name"
              :file="item"
            >
            </DownloadFile>
          </div>
          <slot name="bottom"></slot>
          <div style="position: relative; height: 50px">
            <div style="position: absolute; right: 0px">
              <slot name="btn"></slot>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DownloadFile from "@/components/downloadFile/index.vue";
import Codemirror from "@/components/codeEidt/index.vue";
export default {
  components: {
    DownloadFile,
    Codemirror
  },
  props: ["document", "uploadIsShow","fileListIsShow"],
  data: () => ({
    imgIShow: false,
    imgUrl: "",
  }),
  methods: {

    textBeforeUpload(file) {
      const format = ["pdf", "doc", "docx", "txt", "zip", "rar", "7z"];
      const size = 5;
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const str = format.join("、");
      if (format.indexOf(fileSuffix) === -1) {
        this.$message(`上传文件只能是${str}格式`, "error");
        return false;
      }
      const limit = file.size / 1024 / 1024 < size;
      if (!limit) {
        this.$msg(`上传文件大小不能超过${size}MB`, "error");
        return false;
      }
    },
    handleRemoveFile(file, fileList) {
      this.document.answerFile.splice(this.file.indexOf(file), 1);
    },
    handleExceed(files, fileList) {
      this.$message.warning("只能上传一个文件");
    },
    uploadSuccessFile(response, file, fileList) {
      this.document.answerFile.push(response);
    },
    showImg(url) {
      this.imgIShow = true;
      this.imgUrl = url;
    },
  },
  computed: {
    headers() {
      return {
        Authorization: this.$store.getters.token,
      };
    },
  },
};
</script>
<style >
pre {
  white-space: pre-wrap; /*css-3*/
  white-space: -moz-pre-wrap; /*Mozilla,since1999*/
  white-space: -pre-wrap; /*Opera4-6*/
  white-space: -o-pre-wrap; /*Opera7*/
  word-wrap: break-word; /*InternetExplorer5.5+*/
  margin-top: 0px;
  font-size: 16px;
  color: #606266;
  margin: 0px;
}
</style>
<style  scoped>
/* required class */
.my-editor {
  background: #2d2d2d;
  color: #ccc;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}

/* not required: */
.height-300 {
  min-height: 400px;
}
.item-title {
  color: #606266;
  font-size: 17px;
  margin-bottom: 10px;
}
.content-title,
.result-example-title {
  font-size: 15px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: 25px;
  margin: 5px 0 5px 0;
}
.item-content,
.result-example-content {
  color: #606266;
  line-height: 20px;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
/deep/ .el-button--text {
  color: #E6A23C;
}
</style>
